<template>
    <el-container>
        <el-aside width="190px">
            <v-wechat v-bind:wechats="wechats"
                      v-bind:login="0"
                      v-on:getWeChat="getWeChat"
                      v-on:getWeChatAll="getWeChatAll"
                      :leftMenuHeight="leftMenuHeight"></v-wechat>
        </el-aside>
        <el-main class="wrapper">
            <section class="panel"  v-loading="loading"
                     element-loading-text="正在查询同步账号..."
                     element-loading-spinner="el-icon-loading"
                     :style="{height: mainHeight+'px'}">
                <div class="panel-body">
                    <el-tabs class="main-tabs" v-if="formConfig" v-model="tabValue">
                        <el-tab-pane label="基本配置" name="first">
                            <el-form style="width: 600px" :model="formConfig" size="medium" :status-icon="true" :rules="formConfigRules" ref="formConfig"
                                     label-width="120px" class="demo-ruleForm">
                                <el-form-item label="类型：" prop="type">
                                    <el-radio-group v-model="formConfig.type">
                                        <el-radio :label="1">服务号</el-radio>
                                        <el-radio :label="2">订阅号</el-radio>
                                        <el-radio :label="3">小程序</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item required label="账号：" prop="account">
                                    <el-input v-model="formConfig.account" placeholder="请填写微信公众号的邮箱账号"></el-input>
                                </el-form-item>
                                <el-form-item required label="密码：" prop="password">
                                    <el-input v-model="formConfig.password" placeholder="请填写微信公众号的密码"></el-input>
                                </el-form-item>
                                <el-form-item  label="认证：" prop="is_auth">
                                    <el-switch v-model="formConfig.is_auth" :active-value="1" :inactive-value="0"
                                               active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
                                </el-form-item>
                                <el-form-item label="头像：" prop="avatar">
                                    <el-upload
                                    class="avatar-uploader avatar-one"
                                    :action="upload"
                                    :show-file-list="false"
                                    :headers="myHeaders"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeUpload" name="avatar">
                                    <img v-if="formConfig.avatar" :src="formConfig.avatar" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="二维码：" prop="qcode">
                                    <el-upload
                                            class="qcode-uploader avatar-one"
                                            :action="upload"
                                            :show-file-list="false"
                                            :headers="myHeaders"
                                            :on-success="handleQcodeSuccess"
                                            :before-upload="beforeUpload" name="qcode">
                                        <img v-if="formConfig.qcode" :src="formConfig.qcode" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item required label="名称：" prop="name">
                                    <el-input v-model="formConfig.name" placeholder="请填写微信公众号的名称"></el-input>
                                </el-form-item>
                                <el-form-item required label="原始ID：" prop="original_id">
                                    <el-input v-model="formConfig.original_id" placeholder="请填写微信公众号的原始ID"></el-input>
                                </el-form-item>
                                <el-form-item label="微信号：" prop="wechat">
                                    <el-input v-model="formConfig.wechat" placeholder="请填写微信公众号的微信号"></el-input>
                                </el-form-item>
                                <el-form-item required label="APP_ID：" prop="app_id">
                                    <el-input v-model="formConfig.app_id" placeholder="请填写微信公众号的APP_ID"></el-input>
                                </el-form-item>
                                <el-form-item required label="SECRET：" prop="secret">
                                    <el-input v-model="formConfig.secret" placeholder="请填写微信公众号的SECRET"></el-input>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2" label="TOKEN：" prop="token">
                                    <el-input v-model="formConfig.token" placeholder="请填写微信公众号的TOKEN"></el-input>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2" label="AES_KEY：" prop="aes_key">
                                    <el-input v-model="formConfig.aes_key" placeholder="请填写微信公众号的AES_KEY"></el-input>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2" label="API_URL：">
                                    <el-input v-model="formConfig.api_url" readonly></el-input>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2"  label="关注回复：" prop="follow_replay">
                                <el-switch v-model="formConfig.follow_replay" :active-value="1" :inactive-value="0"
                                active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
                                </el-form-item>
                                <el-form-item v-if="formConfig.follow_replay == 1" label="关注回复素材：" prop="follow_matter_id">
                                    <el-select v-model="formConfig.follow_matter_id" style="width: 80%" filterable placeholder="请选择关注回复素材，直接输入搜索">
                                        <el-option label="选择素材" :value="0"></el-option>
                                        <!--<el-option-->
                                                <!--v-for="(item,index) in matters"-->
                                                <!--:key="index"-->
                                                <!--:label="item.title"-->
                                                <!--:value="item.id">-->
                                        <!--</el-option>-->
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2"  label="延迟回复：" prop="delay_replay">
                                    <el-switch v-model="formConfig.delay_replay" :active-value="1" :inactive-value="0"
                                               active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
                                </el-form-item>
                                <el-form-item v-if="formConfig.delay_replay == 1"  label="延迟时间：" prop="replay_at">
                                    <el-select v-model="formConfig.replay_at" style="width: 80%">
                                        <el-option label="延迟时间" :value="0"></el-option>
                                        <el-option label="1分钟" :value="1"></el-option>
                                        <el-option label="5分钟" :value="5"></el-option>
                                        <el-option label="30分钟" :value="30"></el-option>
                                        <el-option label="1小时" :value="60"></el-option>
                                        <el-option label="2小时" :value="120"></el-option>
                                        <el-option label="3小时" :value="180"></el-option>
                                        <el-option label="4小时" :value="240"></el-option>
                                        <el-option label="5小时" :value="300"></el-option>
                                        <el-option label="6小时" :value="360"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="formConfig.delay_replay == 1"  label="延迟回复素材：" prop="delay_matter_id">
                                    <el-select v-model="formConfig.delay_matter_id" style="width: 80%" filterable placeholder="请选择延迟回复素材，直接输入搜索">
                                        <el-option label="选择素材" :value="0"></el-option>
                                        <!--<el-option-->
                                                <!--v-for="(item,index) in matters"-->
                                                <!--:key="index"-->
                                                <!--:label="item.title"-->
                                                <!--:value="item.id">-->
                                        <!--</el-option>-->
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="formConfig.type==1 || formConfig.type==2"  label="开启活动：" prop="activity">
                                    <el-switch v-model="formConfig.activity" :active-value="1" :inactive-value="0"
                                               active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
                                </el-form-item>
                                <el-form-item v-if="formConfig.activity == 1" label="绑定活动：" prop="activity_id">
                                    <el-select v-model="formConfig.activity_id" style="width: 80%" filterable placeholder="">
                                        <el-option label="选择活动" :value="0"></el-option>
                                        <!--<el-option-->
                                        <!--v-for="(item,index) in matters"-->
                                        <!--:key="index"-->
                                        <!--:label="item.title"-->
                                        <!--:value="item.id">-->
                                        <!--</el-option>-->
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="最近登录：" prop="scan_at">
                                    {{formConfig.scan_at ? moment(formConfig.scan_at).format('YYYY-MM-DD HH:mm') : ''}}
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="updateWechat('formConfig')">保 存</el-button>
                                </el-form-item>

                            </el-form>
                        </el-tab-pane>
                        <!--<el-tab-pane label="菜单设置" name="second">-->

                        <!--</el-tab-pane>-->
                        <!--<el-tab-pane label="素材管理" name="third">-->

                        <!--</el-tab-pane>-->
                        <!--<el-tab-pane label="关键字" name="fourth">-->

                        <!--</el-tab-pane>-->
                        <!--<el-tab-pane label="模板ID" name="five">-->

                        <!--</el-tab-pane>-->
                    </el-tabs>
                    <!--<div v-else>公号管理首页，微信服务号个数，微信订阅号个数，微信小程序个数，已认证null个，未认证null个-->
                        <!--，公号管理链接 and 公号添加链接</div>-->
                </div>
            </section>
        </el-main>
    </el-container>
</template>

<script>
    import { mapGetters } from 'vuex';
    import vWechat from '../public/wechat.vue';
    import {WechatAll,WechatInfo,WechatUpdate} from '../../utils/axios';
    export default {
        components:{vWechat},
        activated(){
            //设置顶部导航选中
            this.$store.dispatch('setActiveaTopMenu', '/wechat');
            this.getWeChatAll();
        },
        data() {
            return {
                formConfig: null,//基本配置
                formMenu:[],//菜单设置
                matters:[], //素材数据
                words:[],//关键字数据
                temps:[],//模板ID
                //基本配置表单验证
                formConfigRules: {
                    account: [
                        {required: true, message: '请填写微信公众号的邮箱账号', trigger: 'blur' },
                        {type:'email', message: '邮箱账号格式错误', trigger: 'blur'}
                    ],
                    password: [{required: true, message: '请填写微信公众号的密码', trigger: 'blur'}],
                    name: [{required: true, message: '请填写微信公众号的名称', trigger: 'blur'}],
                    original_id: [{required: true, message: '请填写微信公众号的原始ID', trigger: 'blur'},],
                    app_id: [{required: true, message: '请填写微信公众号的APP_ID', trigger: 'blur'},],
                    secret: [{required: true, message: '请填写微信公众号的SECRET', trigger: 'blur'},],
                },
                wechats:[],//所有公众号
                tabValue:'first',//TAB目录选中
            };
        },
        computed:{
            ...mapGetters(['leftMenuHeight','mainHeight','loading','upload']),
            //Header 添加 token
            myHeaders(){
                // var token = this.$storage.get('token');
                return {
                    // Authorization:token.token_type+' ' + token.access_token,
                    Accept:'application/json'
                }
            },
        },
        methods:{
            //初始化数据
            initData () {
                this.formConfig =  null;
                this.formMenu = [];
                this.matters = [];
                this.words = [];
                this.temps = [];
            },
            //获取所有公众号
            getWeChatAll(){
                WechatAll().then((response)=>{
                    this.wechats = response.data
                })
            },
            //选择公众号
            getWeChat(val){
                this.initData();
                this.$store.dispatch('setLoading', true);
                WechatInfo({params:{account:val}}).then((response)=>{
                    if(response.code){
                        this.$message.error(response.msg);
                    }else{
                        this.$store.dispatch('setLoading', false);
                        this.formConfig = response.data;
                        this.$nextTick(()=>{
                            this.$refs['formConfig'].resetFields();
                        })
                    }
                })
            },
            //表单提交
            updateWechat(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        WechatUpdate(this.formConfig).then((response) => {
                            if (response.code) {
                                this.$message.error(response.msg);
                            } else {
                                this.$message({
                                    type: 'success',
                                    duration: '1000',
                                    message: response.msg,
                                    onClose: () => {
                                        this.getWeChatAll();
                                        this.getWeChat(response.data.original_id);
                                    }
                                });
                            }
                        });
                    }
                });
            },
            //上传图片成功
            handleAvatarSuccess(response){
                this.formConfig.avatar = response.data.path;
            },
            //上传图片成功
            handleQcodeSuccess(response){
                this.formConfig.qcode = response.data.path;
            },
            //上传图片之前的监测
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPNG) {
                    this.$message.error('上传图片只能是JPG/PNG格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
        },
    }
</script>